<template>
  <div>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item style="margin-top:20px;" label="旧密码" prop="OldPwd">
        <el-input type="text" v-model="ruleForm.OldPwd" autocomplete="off" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item style="margin-top:20px;" label="新密码" prop="UserPwd1">
        <el-input type="password" v-model="ruleForm.UserPwd1" autocomplete="off" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item style="margin-top:20px;" label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" style="width:80%"></el-input>
      </el-form-item>

      <el-form-item style="margin-top:20px;" label="电话号码" prop="PhoneNum">
        <el-input
          type="text"
          v-model="ruleForm.PhoneNum"
          autocomplete="off"
          maxlength="11"
          style="width:50%"
        ></el-input>
        <el-button style="margin-left:3%;" @click="GetMA()">获取验证码</el-button>
      </el-form-item>
      <el-form-item style="margin-top:20px;" label="验证码" prop="CheckMA">
        <el-input type="text" v-model="ruleForm.CheckMA" autocomplete="off" style="width:80%"></el-input>
      </el-form-item>
      <el-form-item style="margin-left:-15%;margin-top:20px;">
        <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>>
<script>
export default {
  data() {
    var validateComfirmPwd = (rule, value, callback) => {
      if (this.ruleForm.UserPwd1 !== value) {
        callback(new Error("两次输入的密码不一致！"));
      } else {
        callback();
      }
    };
    var CheckOldPwd = (rule, value, callback) => {
      if (this.User.UserPwd !== value) {
        callback(new Error("旧密码不正确"));
      } else {
        callback();
      }
    };
    var CheckPhoneNum = (rule, value, callback) => {
      if (this.User.PhoneNum !== value) {
        callback(new Error("电话号码不正确"));
      } else {
        callback();
      }
    };
    

    return {
      MA: "",
      User: this.$cookies.get("User"),
      ruleForm: {
        OldPwd: "",
        UserPwd1: "",
        checkPass: "",
        PhoneNum: "",
        CheckMA: ""
      },
      rules: {
        OldPwd: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
          { validator: CheckOldPwd, trigger: "blur" }
        ],
        UserPwd1: [{ required: true, message: "请输入新密码", trigger: "blur" }],
        checkPass: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: validateComfirmPwd, trigger: "blur" }
        ],
        PhoneNum: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          {
            required: true,
            pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/,
            message: "请输入正确的电话号码",
            trigger: "blur"
          },
          { validator: CheckPhoneNum, trigger: "blur" }
        ],
        CheckMA: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      }
    };
  },
  mounted() {
    // this.User = this.$store.state.User;
  },
  methods: {
    GetMA() {
      this.Ajax.get("api/User/GetMa?PhoneNum=" + this.ruleForm.PhoneNum).then(
        M => {
          this.MA = M.data;
          console.log(M.data);
        }
      );
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.ruleForm.CheckMA == this.MA) {
              this.Ajax.post("api/User/UpdateUser", {
              data: {
                UserID:this.User.UserID,
                UserName: this.User.UserName,
                UserSex: this.User.Sex,
                UserBirthDay: this.User.UserBirth,
                PhoneNum: this.User.PhoneNum,
                UserAddress:this.User.UserAddress,
                UserTx:this.User.UserTx,
                UserPwd:this.ruleForm.UserPwd1,
                UserAccount:this.User.UserAccount
              }
            }).then(U => {
              if (U.data == 1) {
                 this.$notify({
                     title: '成功',
                     message: '修改成功',
                      type: 'success'
                    });
                window.location.reload();
              } else {
                  this.$notify.error({
                     title: '错误',
                     message: '修改失败'
                   });
                }
            });
          }
        } else {
          alert("验证码错误");
          return false;
        }
      });
    }
  }
};
</script>
<style>
</style>